<template>
  <bm-overlay ref="customOverlay" class="simple" pane="labelPane" @draw="draw">
    <div v-text="text"></div>
  </bm-overlay>
</template>

<script>
export default {
  name: "labelOVerlay",
  props: ["text", "position", "active"],
  //   watch: {
  //     position: {
  //       handler() {
  //         this.$refs.customOverlay.reload();
  //       },
  //       deep: true,
  //     },
  //   },
  methods: {
    handleClick() {
      global.alert("Well done.");
    },
    draw({ el, BMap, map }) {
      const { lng, lat } = this.position;
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat));
      el.style.left = pixel.x - 60 + "px";
      el.style.top = pixel.y - 20 + "px";
    },
  },
};
</script>
<style lang="less" scoped>
.simple {
  text-align: center;
  padding: 5px;
  color: #fff;
  border-radius: 15px;
  font-family: PingFangSC-Medium;
  font-size: 12px;
  letter-spacing: 0;
  height: 31px;
  position: absolute;
  border-radius: 5px;
  background-color: rgb(64, 81, 230);
  color: #fff;
  font-size: 12px;
  text-align: center;
  width: 84px;
  &:hover {
    z-index: 1;
    background-color: rgba(240, 65, 52, 0.9);
    color: #fff;
  }
}
</style>
